<!-- 保养记录 -->
<template>
  <a-row justify="space-between">
    <card :showDivider="false">
      <template #title>
        <span>保养记录</span>
        <a-button
          v-if="carInfo.operateStatus != 40 && carInfo.operateStatus != 50"
          type="primary"
          v-permission="'svms:asstes:car:car-model.detail.maintenanceRecord.add'"
          class="ml-3"
          @click="addMaintenanceFn"
        >
          <template #icon>
            <icon-plus />
          </template>
          新增保养
        </a-button>
      </template>
    </card>
    <div style="width: 500px">
      <list-searcher columns="1" :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    </div>
  </a-row>
  <a-divider style="margin: 0 0 20px" />

  <table-index :table="table" @loadData="loadData">
    <template #assetFeeInfo="{ record }">
      {{ record.maintenanceAmount }}
      <div class="maintenanceStatus" :class="{ payed: record.assetFeeStatus == 1 }">{{ record.assetFeeStatusName }}</div>
    </template>
  </table-index>
  <!-- 新增 -->
  <Modals.CarMaintenanceFormModal ref="formModalRef" @ok="loadData" />
  <!-- 详情 -->
  <Modals.CarMaintenanceDetail ref="detailModalRef" />
  <!-- 结算 -->
  <Modals.SettlementModal ref="settlementModalRef" @ok="loadData" />
  <!-- 操作记录 -->
  <OperateLogModal ref="operateLogModalRef" type="3" />
</template>

<script setup>
  import { onMounted, ref, computed, reactive } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { getMaintenanceList, carMaintenanceDelete } from '@/api/asset/maintenance'
  import { Modal, Message } from '@arco-design/web-vue'
  import { usePageDict } from '@/hooks/useDict'
  import Modals from '../maintenance-record/modals'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routePrams = route.params
  const operateLogModalRef = ref()
  const formModalRef = ref()
  const settlementModalRef = ref()
  const detailModalRef = ref()
  const queryParam = reactive({})
  const carManageDict = usePageDict('carManageDict')
  const props = defineProps({
    carInfo: Object,
    defaultParam: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })

  onMounted(() => {
    if (route.params) {
      queryParam.carId = route.params.id
      loadData()
    }
  })
  // 新增保养
  const addMaintenanceFn = () => {
    formModalRef.value.open({ carId: props.carInfo.id, page: 'carDetail' })
  }
  // 查询条件
  const searchList = computed(() => {
    return [
      {
        label: '费用状态',
        prop: 'feeStatus',
        type: 'a-select',
        options: carManageDict.feeStatusEnum,
      },
    ]
  })
  const table = useTable({
    columns: [
      { title: '下次保养里程', dataIndex: 'estimatedKilometre', unit: '公里', width: 160 },
      { title: '下次保养日期', dataIndex: 'estimatedTime', width: 140 },
      { title: '保养单关联门店', dataIndex: 'siteName' },
      { title: '本次保养里程', dataIndex: 'entranceKilometre', unit: '公里', width: 160 },
      { title: '本次保养日期', dataIndex: 'entranceDate', width: 140 },
      { title: '修理厂', dataIndex: 'maintenanceShop' },
      { title: '收支类型', dataIndex: 'costTypeName' },
      { title: '保养费', slotName: 'assetFeeInfo', unit: '元' },
      { title: '负责人', dataIndex: 'undertaker' },
      { title: '保养单号', dataIndex: 'maintenanceNo', width: 150 },
    ],
    operates: [
      {
        label: '详情', //展示保养计划内容
        permission: 'svms:asstes:car:car-model.detail.maintenanceRecord.detail',
        method: (record, column, rowIndex) => {
          detailModalRef.value.open(record)
        },
      },
      {
        label: '编辑',
        permission: 'svms:asstes:car:car-model.detail.maintenanceRecord.edit',
        method: (record) => {
          formModalRef.value.open({ id: record.id, page: 'carDetail', mode: 'edit' })
        },
      },
      {
        label: '结算',
        permission: 'svms:asstes:car:car-model.detail.maintenanceRecord.settlement',
        show: (record) => {
          // 0未付款,1已付款,5已驳回
          return [0, 5].includes(record.assetFeeStatus)
        },
        method: (record) => {
          // 1保养，3年检
          settlementModalRef.value.show([record.assetFeeId])
        },
      },
      {
        label: '操作记录',
        permission: 'svms:asstes:car:car-model.detail.maintenanceRecord.operateLog',
        method: (record) => {
          operateLogModalRef.value.open(record.id)
        },
      },
      {
        label: '删除',
        permission: 'svms:asstes:car:car-model.detail.maintenanceRecord.delete',
        method: (record) => {
          Modal.confirm({
            title: '删除保单',
            okText: '确认',
            content: '请再次确认是否删除保养记录？',
            onOk: () => {
              carMaintenanceDelete({ id: record.id }).then(() => {
                Message.success({
                  content: '删除成功',
                })
                loadData()
              })
            },
          })
        },
      },
    ],
  })
  const loadData = useFetchTableDataApi(table, queryParam, getMaintenanceList)
</script>
<style lang="less" scoped>
  .maintenanceStatus {
    color: #f53f3f;
    &.payed {
      color: #00b42a;
    }
  }
  :deep(.custom-divider) {
    display: none;
  }
  :deep(.form-item-content) {
    width: 100% !important;
  }
</style>
